<template>
  <div class="log-view">
    <el-form :model="queryParams" inline size="small">
      <el-form-item>
        <el-date-picker
          v-model="queryParams.timestamp"
          type="daterange"
          unlink-panels
          :editable="false"
          range-separator="到"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY年MM月DD日"
          value-format="YYYY-MM-DD"
          :shortcuts="shortcuts"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入操作账号"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <unit-select
          v-model="queryParams.unitId"
          :permission="listPermission"
          placeholder="请选择操作单位"
        />
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="queryParams.type"
          placeholder="请选择操作类型"
          clearable
        >
          <el-option label="请求" :value="1" />
          <el-option label="响应" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="queryParams.operation"
          placeholder="请输入操作方法"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="queryParams.description"
          placeholder="请输入操作参数"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getInfo" icon="Search">
          搜索
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="reset" icon="RefreshRight">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <Table :data="tableData">
      <TableColumn label="ID" prop="id" :min-width="100" />
      <TableColumn label="操作时间" prop="timestamp" :min-width="160" />
      <TableColumn label="操作人" prop="name" :min-width="160" />
      <TableColumn label="操作人账号" prop="userName" :min-width="120" />
      <TableColumn label="操作单位" prop="unitName" :min-width="140" />
      <TableColumn label="操作类型" prop="type" :min-width="80">
        <template #default="{ row }">
          <el-tag v-if="row.type === 1" type="warning">请求</el-tag>
          <el-tag v-else type="success">响应</el-tag>
        </template>
      </TableColumn>
      <TableColumn label="操作方法" prop="operation" :min-width="250" />
      <TableColumn
        label="参数"
        prop="description"
        :min-width="250"
        show-overflow-tooltip
      />
    </Table>
    <Pagination
      v-model:current-page="page.currentPage"
      v-model:page-size="page.pageSize"
      :total="page.total"
      @size-change="getInfo"
      @current-change="getInfo"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import Pagination, { PageType } from '@/components/Pagination.vue'
import { PageParam } from '@/type'
import Table from '@/components/table/Table.vue'
import TableColumn from '@/components/table/TableColumn.vue'
import { getLogByPage } from '@/api/sys/log'
import UnitSelect from '@/components/unit/UnitSelect.vue'
import useUserStore from '@/stores/user'

const tableData = reactive([])
const userStore = useUserStore()
const listPermission = 'log:list'

const shortcuts = [
  {
    text: '上一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '上一月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '上三月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

const page = reactive<PageType>({
  currentPage: 1,
  pageSize: 20,
  total: 0,
})

const queryParams = reactive({
  operation: undefined,
  description: undefined,
  userName: undefined,
  timestamp: undefined,
  type: undefined,
  unitId: undefined,
})

function reset() {
  Object.assign(queryParams, {
    operation: undefined,
    description: undefined,
    userName: undefined,
    timestamp: undefined,
    type: undefined,
    unitId: undefined,
  })
  getInfo()
}

async function getInfo() {
  const postQueryParams = {
    timestampStar: queryParams.timestamp?.[0]
      ? queryParams.timestamp?.[0] + ' 00:00:00.000'
      : undefined,
    timestampEnd: queryParams.timestamp?.[1]
      ? queryParams.timestamp?.[1] + ' 23:59:59.999'
      : undefined,
    operation: queryParams.operation,
    description: queryParams.description,
    userName: queryParams.userName,
    type: queryParams.type,
    unitId:
      queryParams.unitId || userStore.getPermissionId(listPermission).join(','),
  }
  const postData: PageParam<typeof postQueryParams> = {
    currentPage: page.currentPage,
    pageSize: page.pageSize,
    sort: [],
    query: postQueryParams,
  }
  const { data } = await getLogByPage(postData)
  if (data.status === 200) {
    tableData.length = 0
    page.currentPage = data.data.currentPage
    page.pageSize = data.data.pageSize
    page.total = data.data.totalCount
    tableData.push(...data.data.data)
  }
}

onMounted(() => {
  getInfo()
})
</script>

<style scoped></style>
